<template>
  <div>
    <h1>ToDoList实现</h1>
    <AddItem :add="add" />
    <TodoList :todos="todos" :change="change" :deltodo="deltodo"/>
    <Status :todos="todos" :changeAllCheck="changeAllCheck" :clearAlldone="clearAlldone"/>
  </div>
</template>

<script>

import AddItem from "./components/AddItem";
import Status from "./components/Status";
import TodoList from "./components/TodoList";
import {nanoid} from "nanoid";

export default {
  name: 'App',
  components: { AddItem,Status,TodoList},
  data(){
    return{
      todos:[
        {id:"001",title:"吃饭",done:true },
        {id:"002",title:"睡觉",done:false },
        {id:"003",title:"学习",done:false },
      ]
    }
  },
  methods:{
    add(obj){
      this.todos.unshift(obj)
    },
    change(id){
      this.todos.forEach((todo)=>{
        if(todo.id==id){
          todo.done=!todo.done
          console.log(todo)
        }
      })
    },
    deltodo(id){
      this.todos = this.todos.filter((todo)=>{
        return todo.id !== id
      })
    },
    clearAlldone(){
      this.todos=this.todos.filter((todo)=>{
        return !todo.done
      })
    },
    changeAllCheck(value){
      this.todos.forEach((todo)=>{
        todo.done =value
      })
    }
  }
}
</script>
